<template>
  <div class="housing-pie-chart">
    <split-title :text="title" v-bind="$attrs" />
    <echarts-pie
      v-bind="$attrs"
      style="height: 260px"
      :options="echartsOption"
      :data-list="dataList"
      :sub-text="chartName"
      :text="totalCount"
    >
      <template #icon>
        <div class="echarts-icon"></div>
      </template>
    </echarts-pie>
  </div>
</template>

<script>
import find from 'lodash-es/find.js';
import { getTotal } from '@gis/lib/utils/index.js';
import SplitLine from '@gis/lib/components/splitter/split-line.vue';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';
import EchartsPie from '@gis/lib/components/charts/echarts-pie.vue';

export default {
  name: 'housing-statistical',
  components: { SplitTitle, EchartsPie, SplitLine },
  props: {
    title: { type: String, default: '标题' },
    chartName: { type: String, default: '总数' },
    paramsData: { type: Object, default: () => ({ type: 1 }) },
    dataList: { type: Array, default: () => [] },
    handleData: { type: Function, default: undefined },
    api: { type: Function, default: undefined },
  },
  computed: {
    totalCount() {
      return getTotal(this.dataSource, (item) => item.value);
    },
    echartsOption() {
      return {
        title: {
          text: this.totalCount,
          subtext: this.chartName,
          top: '20%',
          left: '47.5%',
          textStyle: {
            fontSize: 24,
          },
          subtextStyle: {
            fontSize: 14,
          },
        },
        legend: {
          top: '60%',
          left: 'center',
          formatter: (name) => {
            let item = find(this.dataSource, (item) => item.name == name);
            return '{a|' + item.name + '}' + '{b|' + item.value + '}' + '{c|}';
          },
          textStyle: {
            rich: {
              a: {
                color: '#fff',
                fontSize: '14px',
                width: 60,
              },
              b: {
                color: '#fff',
                fontSize: '14px',
              },
            },
          },
        },
        series: {
          radius: ['50%', '65%'],
          center: ['50%', '30%'],
        },
      };
    },
    dataSource() {
      if (typeof this.api === 'function') {
        return this.api();
      }
      if (this.dataList && this.dataList.length) {
        return this.dataList;
      }
      return [];
    },
  },
};
</script>

<style lang="less">
.housing-pie-chart {
  .echarts-icon {
    width: 95px;
    height: 95px;
    border: 1px solid #61778a;
    border-radius: 50%;
    box-shadow: 0 0 9px 1px #0b589a inset;
  }
}
</style>
